<template>
    <el-card shadow="never">
      <!-- 案例   -->
      <!--高亮行  highlight-hover-row-->
      <!--高亮行  allAlign  left  center right-->
      <!--size三种设置-->
      <!--设置大小为 medium，默认大小：Table 40px 、Button 30px、Input 30px、Checkbox 14px、Radio 14px-->
      <!--设置大小为 medium，默认大小：Table 40px 、Button 30px、Input 30px、Checkbox 14px、Radio 14px-->
      <!--设置大小为 small，默认大小：Table 40px 、Button 30px、Input 30px、Checkbox 14px、Radio 14px-->
      <!--设置大小为 mini，默认大小：Table 36px 、Button 28px、Input 28px、Checkbox 14px、Radio 14px-->
     
      <!--
        序号标志：<vxe-table-column type="seq" width="60"></vxe-table-column>
        :seq-config="{startIndex: 10000}" 序号设置
      -->

      <!--
        部分固定列宽，其余自适应   width="60"  
        设置固定和最小宽，实现等比例放大  min-width="60"
        设置百分比   width="30%" 都可以
      -->

      <!--stripe 斑马线-->
      <!--
        高亮行 highlight-current-row 要搭配 :keyboard-config="{isArrow: true} 一起使用，否则无效
      -->
      <!--
        vxe-table 需要带 id 
        
      -->
      <el-row>
          <el-col :span="24" class="tableTest">  <!--与 el-card 有冲突，会导致table右侧border线变为双线的问题可以使用如下方式解决-->
          <vxe-toolbar custom :refresh="{query: findList}">>
              <template v-slot:buttons>
                <vxe-button icon="fa fa-plus" status="perfect">新增</vxe-button>
                <vxe-button icon="fa fa-trash-o" @click="removeSelectData" status="perfect">删除</vxe-button>
                <vxe-button icon="fa fa-save" status="perfect">保存</vxe-button>
                <vxe-button icon="fa fa-print" status="perfect" @click="printEvent">打印</vxe-button>
                <vxe-button icon="fa fa-download" status="perfect" @click="printSelectEvent">选中</vxe-button>
                <vxe-button icon="fa fa-upload" status="perfect" @click="exportDataEvent">导出与打印</vxe-button>
              </template>
          </vxe-toolbar>
            <!-- height="500" -->
            <vxe-table id="tableMap"
              :max-height="customTableHeight"
              size="mini"
              ref="tableRef"
              resizable
              :loading="loading"
                border
                stripe
                auto-resize
                show-header-overflow
                highlight-hover-row
                export-config
                show-overflow
                highlight-current-row
                :custom-config="{storage: true}"
                :align="allAlign"
                :empty-render="{name: 'NotData'}"
                :keyboard-config="{isArrow: true}"
                :data="tableData">
                <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
                <vxe-table-column type="checkbox" title="请选择" width="140"></vxe-table-column>                
                <vxe-table-column field="id" title="id" min-width="120" sortable></vxe-table-column>
                <vxe-table-column field="username" title="姓名" min-width="120" sortable></vxe-table-column>
                <vxe-table-column field="nickName" title="昵称" min-width="120" sortable></vxe-table-column>
                <vxe-table-column field="phone" title="电话" width="150" sortable></vxe-table-column>
                <vxe-table-column field="origin" title="籍贯" width="150" sortable></vxe-table-column>
                <vxe-table-column field="location" title="所在地" width="150" sortable></vxe-table-column>
                <vxe-table-column field="school" title="所在学校" width="150" sortable></vxe-table-column>
                <vxe-table-column field="hot" title="是否火热" width="150" sortable></vxe-table-column>
                <vxe-table-column field="content" title="内容" width="500" sortable></vxe-table-column>
                <vxe-table-column title="操作" fixed="right" width="200">
                  <template slot-scope="scope">
                      <el-tag style="cursor:pointer;margin-right: 4px;" size="mini" @click="addEdit(scope.row)"><i class="el-icon-edit"/>编辑</el-tag>
                      <el-tag style="cursor:pointer;" size="mini" type="danger" @click="remove(scope.row)"><i
                        class="el-icon-delete"/>删除
                      </el-tag>
                  </template>
                </vxe-table-column>
              </vxe-table>
              <vxe-pager
                background
                size="small"
                :loading="loading"
                :current-page="listQuery.currentPage"
                :page-size="listQuery.pageSize"
                :total="listQuery.totalResult"
                :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                @page-change="handlePageChange3">
              </vxe-pager>
          </el-col>
      </el-row>
      <!--更新和编辑操作-->
      <add-edit
        :dialog-visible="addEditVisible"
        :data="addEditData"
        @close="closeDialog"
      />

    </el-card>
</template>

<script>
  import addEdit from '@/views/demo/addEdit'
  import systemUserApi from '@/api/system/user'
   export default {
          data () {
            return {
              addEditVisible: false,//是否显示编辑
              addEditData: {},//需要编辑的数据
              customTableHeight: 200,//暂不知道是什么意思
              allAlign: null,
              loading: true,
              listQuery: {//封装查询数据
                page: 1,
                pageSize: 10,
                username: null,
                nickName: null,
                phone:null,
                origin:null
              },
              tableData: [{
                            "id": 1,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "1112231231231",
                            "origin": "1河北",
                            "location": "1北京",
                            "school": "1学校在哪里",
                            "hot": "1热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 2,
                            "username": "admin",
                            "nickName": "2顶级管理员",
                            "phone": "2112231231231",
                            "origin": "2河北",
                            "location": "2北京",
                            "school": "2学校在哪里",
                            "hot": "2热热热热热热热热热热热",
                            "content":"21111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 3,
                            "username": "3admin",
                            "nickName": "3顶级管理员",
                            "phone": "3112231231231",
                            "origin": "3河北",
                            "location": "3北京",
                            "school": "3学校在哪里",
                            "hot": "3热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 4,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 5,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 6,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 7,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 8,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 9,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 10,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 11,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 12,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 13,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 14,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 15,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 16,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 17,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 18,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          }]
            }
          },
          created () {
              //loading 用于控制进度。
              // this.loading = true
              // setTimeout(() => {
              //   this.loading = false
              // }, 3000)

              // systemUserApi.list(this.listQuery).then(res => {
              //   this.tableData = res.data || []
              //   this.loading = false
              // }).catch(() => this.loading = false);


          },
          methods: {
              //关闭窗口对数据进行初始哈
              closeDialog() {
                this.addEditVisible = false
                this.operationType = 1
                this.addEditData = {
                            "id": null,
                            "username": "",
                            "nickName": "",
                            "phone": "",
                            "origin": "",
                            "location": "",
                            "school": "",
                            "hot": "",
                            "content":""
                          }
              },
            //选中删除
            removeSelectData(){
                let selectDatas = this.$refs.tableRef.getCheckboxRecords();
                this.$confirm('删除后将无法恢复，是否继续？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  closeOnPressEscape: false,
                  closeOnClickModal: false,
                  type: 'warning'
                }).then(() => {
                  console.log("删除成功!"+selectDatas);
                  this.$message.success('删除成功');
                  // selectDatas.forEach(item => {
                  //   console.log("item.id:",item.id);
                  // })
                  //systemUserApi.remove(row.id).then(res => {});
                })
            },remove:function(row){
                this.$confirm('删除后将无法恢复，是否继续？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  closeOnPressEscape: false,
                  closeOnClickModal: false,
                  type: 'warning'
                }).then(() => {
                  console.log("删除成功!");
                  this.$message.success('删除成功');
                  //systemUserApi.remove(row.id).then(res => {});
                })
            },findList:function(){
                //查询
            },printSelectEvent:function(){
                    //打印选中
                this.$refs.tableRef.print({
                    data: this.$refs.tableRef.getCheckboxRecords()
                  })
            },
             printEvent () {
                  //打印
              console.log(this.$refs.tableRef);
              this.$refs.tableRef.print({
                sheetName:"最新系统",
                isHeader: false,
                isFooter:true,
                columnFilterMethod: column => ['username', 'nickName'].includes(column.property)  
              });
            },
            exportDataEvent () {

              //导出与打印
              this.$refs.tableRef.openExport()
            },
            exportEventXls() {
                this.$refs.tableRef.exportData({
                  filename: 'export',
                  sheetName: '导出数据',
                  type: 'xlsx'
                })
              }
          }
        }
</script>

<style scoped>
  .tableTest{
    margin: 0.5px;
  }
</style>

